<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div class="">
    <c:if test="${not empty message}">
        <div class="alert alert-dismissable alert-success">
            <p>${message}</p>
        </div>
    </c:if>
    <div class="page-header">
        <h2>Create new Grant Application</h2>
    </div>
    <form:form action="" modelAttribute="grant" commandName="grant"
               id="creationForm" method='POST' class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">Title:</label>

            <div class="col-sm-9">
                <form:input path="grantName" class="form-control" name="grantName"
                            placeholder="Enter title" data-bv-stringlength="true"
                            data-bv-stringlength-max="40" data-bv-stringlength-min="3"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Area:</label>

            <div class="col-sm-9">
                <select id="grantAreaId" name="grantAreaId" class="form-control">
                    <c:forEach var="grantArea" items="${grantAreas}">
                        <option value="${grantArea.grantAreaId}">${grantArea.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Needed money:</label>

            <div class="col-sm-9">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <form:input path="requestedMoney" class="form-control" placeholder="Enter sum you need"
                                name="neededMoney" min="0" required="true"/>
                </div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Release time</label>

            <div class="col-sm-9">
                <form:input path="releaseDate" class="form-control" name="releaseDate"/>
            </div>

        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Description:</label>

            <div class="col-sm-9">
                <form:textarea path="requestDescription" class="form-control"
                        />
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </div>

    </form:form>
</div>

<script>
    $(document).ready(function () {
        $('#creationForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                releaseDate: {
                    validators: {
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The value is not a valid date in format MM/DD/YYYY'
                        }
                    }
                }
            }
        });

    });
</script>